/**
 * @desc 赛事列表-后勤管理，新增食品弹框
 * @author yd_zhaorongjun
 */
<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="1200px"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div v-if="dialogVisible">
      <el-table v-loading="loading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;" height="500px" @selection-change="selection">
        <el-table-column type="selection" label-class-name="selection" width="40" />
        <el-table-column label="食品图片" align="center" width="70">
          <template slot-scope="{row}">
            <img class="hotelPhoto" :src="getStaticFileUrl(row.imagePath)" alt="" @error="errorPhoto" @mouseenter="showImg(...arguments, row.imagePath)" @mouseleave="hideImg(row.imagePath)">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="食品名称" min-width="110" />
        <el-table-column
          label="餐别"
          width="110"
        >
          <template slot-scope="{row}">
            {{ row.foodType.name || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" width="140">
          <template slot-scope="{row}">
            <div class="gl_input_number">
              ￥
              <el-input-number v-model="row.price" :controls="false" :precision="2" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 70%;padding-left:5px;padding-right:5px" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="配送时间" align="center" width="260">
          <template slot-scope="{row}">
            <el-time-picker
              v-model="row.eventTime"
              :default-value="[row.startTime, row.endTime]"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
              style="width:90%"
              @change="timeChange"
            />
          </template>
        </el-table-column>
        <el-table-column label="配送地址" align="center" width="280">
          <template slot-scope="{row}">
            <el-input
              v-model="row.deliveryAddress"
              type="text"
              size="mini"
              placeholder="请输入配送地址"
            />
          </template>
        </el-table-column>
      </el-table>
      <img v-if="isShowImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <!-- <el-row class="gl_pt_20" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_EventsManagementLaunchedFoodQO.Page"
          :page-size="Api_GET_EventsManagementLaunchedFoodQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <!-- 保存按钮 -->
      <el-button type="primary" :disabled="SelectionList.length <= 0" :loading="submitLoading" size="mini" @click="saveNew()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import defaultHotelImg from '@/assets/images/face_default.png';
import { CopyData } from '@/lib';
import { Api_GET_EventsManagementLaunchedFoodQO, SiSTKWEventsManagementLaunchedFoodCreateDto } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementFoodUnlaunchedFoodList
} from '@/extend/api/gameswaggerApi/app';
export default {
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      loading: false,
      currentPage: 1,
      totalPage: 0,
      title: '',
      Api_GET_EventsManagementLaunchedFoodQO: new Api_GET_EventsManagementLaunchedFoodQO(),
      tableData: [],
      submitLoading: false,
      isShowImg: false,
      bigImg: '',
      isShowRoomImg: false,
      rowId: '',
      position: {
        left: 0,
        top: 0
      },
      timeOut: '',
      dialogVisible: false,
      SelectionList: [] // 选中的数据
    };
  },
  created() {
    this.gameId = this.$route.params.id;
  },
  methods: {
    open(row) {
      console.log(row);
      this.title = '选择食品';
      this.SelectionList = [];
      this.tableData = [];
      this.rowId = row.id;
      this.Api_GET_EventsManagementLaunchedFoodQO = new Api_GET_EventsManagementLaunchedFoodQO();
      this.dialogVisible = true;
      this.refreshList();
    },
    // 刷新列表
    refreshList(page) {
      this.loading = true;
      // this.Api_GET_EventsManagementLaunchedFoodQO.Page = page || 1;
      // this.Api_GET_EventsManagementLaunchedFoodQO.SkipCount = (this.Api_GET_EventsManagementLaunchedFoodQO.Page - 1) * this.Api_GET_EventsManagementLaunchedFoodQO.MaxResultCount;
      this.Api_GET_EventsManagementLaunchedFoodQO.LaunchedRestaurantId = this.rowId;
      this.Api_GET_EventsManagementLaunchedFoodQO.IncludeFoodType = true;
      api_GET_EventsManagementFoodUnlaunchedFoodList(this.Api_GET_EventsManagementLaunchedFoodQO).then(res => {
        console.log(res);
        this.tableData = res;
        // 初始化
        for (let i = 0; i < this.tableData.length; i++) {
          const item = this.tableData[i];
          this.$set(item, 'eventTime', ['08:00', '23:00']);
          item.price = undefined;
          this.$set(item, 'deliveryAddress', '');
        }
        // this.totalPage = res.totalCount;
        this.loading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.loading = false;
      });
    },
    // 重置搜索表单
    refreshSearchForm() {
      this.Api_GET_EventsManagementLaunchedFoodQO = new Api_GET_EventsManagementLaunchedFoodQO();
      this.refreshList();
    },
    // 选中的数据
    selection(val) {
      this.SelectionList = val;
    },
    // 新增
    saveNew() {
      console.log(this.SelectionList);
      const _this = this;
      const isPicksupprice = this.SelectionList.some((item) => {
        return item.price === undefined;
      });
      const isSendsprice = this.SelectionList.some((item) => {
        return item.deliveryAddress === '';
      });
      const isRunningStartHour = this.SelectionList.some((item) => {
        return !item.eventTime[0];
      });
      //   都是true 的话代表有空的，提示不能为空
      if (isPicksupprice || isSendsprice || isRunningStartHour) {
        this.$message({ type: 'error', message: '已勾选的输入框、时间和配送地址不能为空' });
        return;
      }
      const returnData = [];
      for (let i = 0; i < this.SelectionList.length; i++) {
        const item = this.SelectionList[i];
        _this.Api_POST_ReceptionPickUpAddressInput = new SiSTKWEventsManagementLaunchedFoodCreateDto();
        CopyData(item, this.Api_POST_ReceptionPickUpAddressInput);
        _this.Api_POST_ReceptionPickUpAddressInput.launchedRestaurantId = this.rowId;
        _this.Api_POST_ReceptionPickUpAddressInput.foodId = item.id;
        _this.Api_POST_ReceptionPickUpAddressInput.price = Math.floor(_this.Api_POST_ReceptionPickUpAddressInput.price * 1000) / 10;
        _this.Api_POST_ReceptionPickUpAddressInput.deliveryStartHour = item.eventTime[0].split(':')[0];
        _this.Api_POST_ReceptionPickUpAddressInput.deliveryStartMinute = item.eventTime[0].split(':')[1];
        _this.Api_POST_ReceptionPickUpAddressInput.deliveryEndHour = item.eventTime[1].split(':')[0];
        _this.Api_POST_ReceptionPickUpAddressInput.deliveryEndMinute = item.eventTime[1].split(':')[1];
        returnData.push(_this.Api_POST_ReceptionPickUpAddressInput);
      }
      this.submitLoading = true;
      this.$emit('insert', returnData);
    },
    // 处理时间
    timeChange(row) {
      console.log(row);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    },
    showImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      this.timeOut = setTimeout(() => {
        _this.isShowImg = true;
        this.$set(this.position, 'left', _position.left + 60 + 'px');
        this.$set(this.position, 'top', _position.top + 'px');
      }, 300);
    },
    hideImg(img) {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowImg = false;
    },
    showRoomImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      console.log(_position);
      this.timeOut = setTimeout(() => {
        _this.isShowRoomImg = true;
        _this.$set(_this.position, 'left', _position.left + 60 + 'px');
        _this.$set(_this.position, 'top', _position.top + 'px');
      }, 300);
      console.log(this.position);
    },
    hideRoomImg() {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowRoomImg = false;
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_EventsManagementLaunchedFoodQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    }
  }
};
</script>
<style lang="scss" scoped>
  .hotelPhoto, .roomPhoto{
    width: 48px;
    height: 36px;
    vertical-align: middle;
  }
  .hotelBigPhoto{
    width: 310px;
    height: 280px;
    position: absolute;
    z-index: 10;
    left: 70px;
  }
  .roomBigPhoto{
    width: 310px;
    height: 280px;
    position: fixed;
    z-index: 10;
  }
  .icon_color {
    color: #1682e6;
  }
  .el-input-number.is-without-controls .el-input__inner{
    padding-left: 5px;
    padding-right: 5px;
  }
</style>

